<template>
    <div id="container" class="text-white text-sm bg-primary-300 min-h-screen pt-12"> 
        <div id="main" class="bg-primary-300 p-6 text-black">
            <div class="rounded bg-white mx-4 my-4 py-6">
                <div class="px-6">
                    <h1 class="text-lg font-semibold">个人中心</h1>
                </div>
            </div>
            <div class="rounded bg-white mx-4 mt-4 py-6"> 
                <PersonalNav/>
                <div class="mt-4 mb-3">
                    <div class="not-prose relative">
                        <div class="ml-4 text-lg">
                            <div class="flex flex-col gap-4">
                                <div class="flex items-center gap-4">
                                    <label for="current_password" class="w-20">原始密码:</label>
                                    <input
                                        v-model="currentPassword"
                                        id="current_password"
                                        type="password"
                                        class="outline-0 rounded border border-solid border-gray-500 h-9 px-2 w-64"
                                    />
                                </div>
                                <div class="flex items-center gap-4">
                                    <label for="new_password" class="w-20">新密码:</label>
                                    <input
                                        v-model="newPassword"
                                        id="new_password"
                                        type="password"
                                        class="outline-0 rounded border border-solid border-gray-500 h-9 px-2 w-64"
                                    />
                                </div>
                                <div class="flex items-center gap-4">
                                    <label for="confirm_password" class="w-20">确认密码:</label>
                                    <input
                                        v-model="confirmPassword"
                                        id="confirm_password"
                                        type="password"
                                        class="outline-0 rounded border border-solid border-gray-500 h-9 px-2 w-64"
                                    />
                                </div>
                            </div>
                            <div class="flex justify-start mt-4">
                                <button
                                    @click="handleChangePassword"
                                    type="button"
                                    class="rounded border bg-blue-500 text-white text-sm h-8 w-16 hover:bg-blue-600"
                                >
                                    提交
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { changePassword } from '@/api/account'
import { showToast } from '@/utils/toast'
import PersonalNav from '@/components/movie/PersonalNav.vue'

const currentPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')

async function handleChangePassword() {
    if (!currentPassword.value || !newPassword.value || !confirmPassword.value) {
        showToast('请填写所有密码字段', 'error')
        return
    }

    if (newPassword.value !== confirmPassword.value) {
        showToast('两次输入的新密码不一致', 'error')
        return
    }

    try {
        const response = await changePassword({
            current_password: currentPassword.value,
            new_password: newPassword.value,
            re_new_password: confirmPassword.value
        })
        
        showToast('密码修改成功', 'success')
        
        // 清空输入框
        currentPassword.value = ''
        newPassword.value = ''
        confirmPassword.value = ''
        
    } catch (error) {
        console.error('修改密码失败:', error)
        let errorMessage = '修改密码失败'
        
        if (error.response && error.response.data) {
            const errorData = error.response.data
            if (errorData.current_password) {
                errorMessage = errorData.current_password.join(' ')
            } else if (errorData.new_password) {
                errorMessage = errorData.new_password.join(' ')
            } else if (errorData.detail) {
                errorMessage = errorData.detail
            }
        }
        
        showToast(errorMessage, 'error')
    }
}
</script>